<template>
  <div class="sys_setting_formdata_style">
    <div class="item">
      <div class="radio_wrp">
        <p class="title">
          工作日
        </p>
        <div class="radio_wrp">
          <el-checkbox-group
            v-model="data.JE_CALENDAR_WORKDAYS"
          >
            <el-checkbox
              v-for="(item, index) in dictlist.JE_CALENDAR_WEEK"
              :label="item.code"
              :key="index"
            >
              {{ item.text }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="item">
      <p class="title">
        节假日
      </p>
      <div class="table">
        <div class="table_items">
          <div class="w15">
            节假日
          </div>
          <div class="w80">
            区间
          </div>
          <div
            @click="add('JE_CALENDAR_FESTIVAL')"
            class="w5"
          >
            +
          </div>
        </div>
        <div
          v-for="(item, index) in data.JE_CALENDAR_FESTIVAL"
          :key="index"
          class="table_items"
        >
          <div class="w15">
            <el-dropdown @command="handleCommand">
              <span
                @click="choose_item('JE_CALENDAR_FESTIVAL', index)"
                class="el-dropdown-link"
                style="cursor: pointer;"
              >
                {{ getCNName(item.code) }}
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(choose, i) in dictlist.JE_CALENDAR_FESTIVAL"
                  :key="i"
                  :command="choose"
                >
                  {{ choose.text }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="w80 date_wrp">
            <el-date-picker
              ref="date"
              v-model="item.limit"
              :editable="false"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="mini"
              class="date__picker"
            />
            <p style="pointer: cursor;">
              {{ getLabel(item) }}
            </p>
          </div>
          <div
            @click="del('JE_CALENDAR_FESTIVAL', index)"
            class="w5"
          >
            x
          </div>
        </div>
      </div>
      <div class="item">
        <div class="radio_wrp">
          <p class="title">
            工作时间(上午)
          </p>
          <div class="select_box">
            <el-select
              v-model="data.JE_CALENDAR_WORKBEGINTIMEAM"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dictlist.JE_CALENDAR_HOURS"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              />
            </el-select>
            <div class="dateBetween">
              ~
            </div>
            <el-select
              v-model="data.JE_CALENDAR_WORKENDTIMEAM"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dictlist.JE_CALENDAR_HOURS"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="radio_wrp">
          <p class="title">
            工作时间(下午)
          </p>
          <div class="select_box">
            <el-select
              v-model="data.JE_CALENDAR_WORKBEGINTIMEPM"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dictlist.JE_CALENDAR_HOURS"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              />
            </el-select>
            <div class="dateBetween">
              ~
            </div>
            <el-select
              v-model="data.JE_CALENDAR_WORKENDTIMEPM"
              placeholder="请选择"
            >
              <el-option
                v-for="item in dictlist.JE_CALENDAR_HOURS"
                :key="item.code"
                :label="item.text"
                :value="item.code"
              />
            </el-select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Gzfw',
  props: {
    formdata: {
      type: Object,
      default: () => {},
    },
    dictlist: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    const data = {
      JE_CALENDAR_WORKDAYS: this.formdata.JE_CALENDAR_WORKDAYS,
      JE_CALENDAR_FESTIVAL: this.formdata.JE_CALENDAR_FESTIVAL,
      JE_CALENDAR_WORKBEGINTIMEAM: this.formdata.JE_CALENDAR_WORKBEGINTIMEAM,
      JE_CALENDAR_WORKENDTIMEAM: this.formdata.JE_CALENDAR_WORKENDTIMEAM,
      JE_CALENDAR_WORKBEGINTIMEPM: this.formdata.JE_CALENDAR_WORKBEGINTIMEPM,
      JE_CALENDAR_WORKENDTIMEPM: this.formdata.JE_CALENDAR_WORKENDTIMEPM,
    };
    return {
      click_item: {},
      data,
    };
  },
  watch: {
    'data.JE_CALENDAR_FESTIVAL': {
      handler(nv) {
        if (nv) {
          nv.forEach((item) => {
            if (Object.assign(item) != '{}' && item.limit) {
              const beginTime = item.limit[0];
              const endime = item.limit[1];
              const diffDays = Math.floor((endime.getTime() - beginTime.getTime()) / 1000 / 60 / 60 / 24);
              if (diffDays > 0) {
                item.list = [];
                for (let i = 0; i <= diffDays; i++) {
                  const times = i * 1000 * 60 * 60 * 24;
                  item.list.push(Ext.Date.format(new Date(beginTime.getTime() + times), 'm-d'));
                }
              }
              item.value = item.list.join(',');
            }
          });
        }
      },
      deep: true,
      immediate: false,
    },
  },
  methods: {
    add(type) {
      const obj = {
        code: 'CJ',
        text: '',
        value: '',
      };
      this.formdata[type].push(obj);
    },
    choose_item(type, index) {
      this.click_item.code = type;
      this.click_item.ind = index;
    },
    handleCommand(item) {
      this.data.JE_CALENDAR_FESTIVAL[this.click_item.ind].code = item.code;
      this.data.JE_CALENDAR_FESTIVAL[this.click_item.ind].text = item.text;
    },
    getCNName(code) {
      if (!code) return;
      const result = this.dictlist.JE_CALENDAR_FESTIVAL.filter(item => item.code === code);
      return result.length > 0 && result[0].text;
    },
    del(type, i) {
      this.formdata[type].splice(i, 1);
    },
    getLabel(item) {
      if (!item || !item.list || item.list.length === 0) return;
      if (item.list[0] === '') return '';
      let arr = '';
      item.list.forEach((value) => {
        const str = `${value.split('-')[0]}月${value.split('-')[1]}日`;
        arr += `${str},`;
      });
      arr = arr.substring(0, arr.length - 1);
      return arr;
    },
  },
};
</script>

<style lang="scss">
  .sys_setting_formdata_style {
    .select_box {
      .el-select {
        width: 45%;
      }
      .dateBetween {
        width: 9%;
        text-align: center;
        display: inline-block;
      }
    }
    .date_wrp {
      position: relative;
      .date__picker {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        cursor: pointer;
        .el-range-input {
          cursor: pointer;
        }
      }
    }
  }
</style>
